<template>
	<div class="box">
	<div class="head">
		<div class="inp1">
			<input type="text" value="" placeholder="输入关键字"/><text class="iconfont icon-a-1-sousuo"></text>
		</div>
		<div class="inp2">
			<input type="text" value="" placeholder="筛选" /><text class="iconfont icon-shaixuan-"></text>
		</div>
	</div>
	<div class="bttom">
		<div class="li">
		<image src="https://s3.bmp.ovh/imgs/2022/03/0daf988e8f5b9060.png" class="img"></image>
		<div class="info">
			<h2>吉野家牛肉饭</h2>
			<p>美食|午饭</p>
			<navigator url="/pages/storesDetails/index"><button class="btn">查看详情</button></navigator>
		</div>
		</div>
		<div class="li">
		<image src="https://s3.bmp.ovh/imgs/2022/03/b08f767847fd575c.jpg" class="img"></image>
		<div class="info">
			<h2>吉野家牛肉饭</h2>
			<p>美食|午饭</p>
			<navigator url="/pages/storesDetails/index"><button class="btn">查看详情</button></navigator>
		</div>
		</div>
		<div class="li">
		<image src="https://s3.bmp.ovh/imgs/2022/03/b08f767847fd575c.jpg" class="img"></image>
		<div class="info">
			<h2>吉野家牛肉饭</h2>
			<p>美食|午饭</p>
			<navigator url="/pages/storesDetails/index"><button class="btn">查看详情</button></navigator>
		</div>
		</div>
		<div class="li">
		<image src="https://s3.bmp.ovh/imgs/2022/03/b08f767847fd575c.jpg" class="img"></image>
		<div class="info">
			<h2>吉野家牛肉饭</h2>
			<p>美食|午饭</p>
			<navigator url="/pages/storesDetails/index"><button class="btn">查看详情</button></navigator>
		</div>
		</div>
	</div>
	</div>
</template>

<script>
</script>

<style>
	.uni-app--maxwidth{
		background-color: #f1f5f8;
	}
	text{
		margin-right: 30rpx;
	}
	input{
		padding-left: 30rpx;
	}
	.info{
		margin-top: 20rpx;
		margin-left: 30rpx;
	}
	.btn{
		margin-top: 40rpx;
		width: 160rpx;
		height: 40rpx;
		color: #FFFFFF;
		background-color: #5eadf0;
		font-size: 10rpx;
		border: 0;
		display: flex;
		align-items: center;
	}
	h2{
		font-size: 30rpx;
	}
	p{
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #999999;
	}
	.li{
		margin-top: 20rpx;
		display: flex;
		height: 240rpx;
		background-color: #FFFFFF;
		margin-left: 20rpx;
		margin-right: 20rpx;
		
	}
.box{
	margin-top: 20rpx;
	height: 100vh;
	background-color: #f1f5f8;
	}
.head{
	background-color: #FFFFFF;
	height: 150rpx;
	display: flex;
	justify-content: space-around;
}
.inp1{
	margin-top: 20rpx;
	color: #000000;
	display: flex;
	width: 433rpx;
	height: 100rpx;
	background-color: #f1f5f8;
	border-radius: 100rpx;
	align-items: center;
}
.inp2{
	margin-top: 20rpx;
	color: #000000;
	display: flex;
	width: 230rpx;
	height: 100rpx;
	background-color: #f1f5f8;
	border-radius: 100rpx;
	align-items: center;
}
.bttom{
	margin-top: 30rpx;
	}
	.img{
		margin-top: 20rpx;
		margin-left: 20rpx;
		width: 185rpx;
		height: 185rpx;
	}
</style>
